<template>
  <div class="login">
    <!-- 标题 -->
    <van-nav-bar title="会员登录" left-arrow fixed @click-left="$router.back()" />
    <!-- 内容 -->
    <div class="content">
        <div class="container">
            <div class="header">
            <p class="title">手机号登录</p>
            <p class="sub-title">未注册的手机号登录后将自动注册</p>
        </div>
        <div class="form">
            <p>
                <input type="number" placeholder="请输入手机号码" v-model="phone">
            </p>
            <p>
                <input type="text" placeholder="请输入图形验证码" v-model="code">
                <img :src="captchaImageData" v-show="loading">
            </p>
            <p>
                <input type="number" placeholder="请输入短信验证码" v-model="sms">
                <span class="code-btn" v-if="n===0" @click="getPhoneCode">获取验证码</span>
                <span class="resend" v-else>重新发送({{n}})秒</span>
            </p>
            <button @click="login">登录</button>
        </div>
        </div>
    </div>
  </div>
</template>

<script>

import { Toast } from 'vant'
import { getCaptchaImage, sendSmsCaptcha, loginService } from '@/api/user'

export default {
  data () {
    return {
      n: 0,
      timer: null,
      loading: false,
      captchaImageData: null,
      captchaImageKey: null,
      phone: null,
      code: null,
      sms: null
    }
  },
  async created () {
    this.loading = false
    const { data: { base64, key } } = await getCaptchaImage()
    this.captchaImageData = base64
    this.captchaImageKey = key
    this.loading = true
  },
  methods: {
    async getPhoneCode () {
      if (!this.phone) {
        Toast('请先输入手机号')
        return
      }

      if (!/^1\d{10}$/.test(this.phone)) {
        Toast('请输入正确的手机号格式')
        return
      }

      if (!this.code) {
        Toast('请输入图形验证码')
        return
      }

      const { message } = await sendSmsCaptcha({ captchaKey: this.captchaImageKey, captchaCode: this.code, mobile: this.phone })
      Toast(message)

      this.n = 60
      this.timer = setInterval(() => {
        if (this.n === 0) {
          clearInterval(this.timer)
          return
        }
        this.n--
      }, 1000)
    },
    async login () {
      const { message, data } = await loginService({ smsCode: this.sms, mobile: this.phone, isParty: false, partyData: {} })
      this.$store.commit('user/setUserInfo', data)
      Toast(message)
      setTimeout(() => {
        this.$router.back()
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>

.login {
 padding-top: 46px;
 padding-bottom: 50px;
 background-color: white;
}

.van-nav-bar {
    ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

    ::v-deep .van-icon-arrow-left {
        color: black;
    }
}

.content {
    width: 100%;
    height: 667px;

    .container {
        width: 315px;
        height: 567px;
        margin: 40px;

        .title {
            color: #191919;
            font-size: 27px;
        }

        .sub-title {
            margin-top: 10px;
            color: #b3b3b3;
            font-size: 14px;
        }
    }

    .form {
        width: 315px;
        height: 257px;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        p {
            width: 297px;
            height: 29px;
            padding: 9px;
            border-bottom: 0.5px solid #f3f1f2;
            display: flex;
            justify-content: space-between;
            align-items: center;

            input {
                border: none;
                padding: 10px 0;
                font-size: 14px;
                color: gray;
            }
        }

        p:nth-child(2) {
            img {
                width: 96px;
                height: 29px;
            }
        }

        .code-btn {
            color: #cea26a !important;
            font-size: 14px !important;
        }

        .resend {
            color: #9e9e9e;
            font-size: 14px;
        }

        button {
            width: 100%;
            height: 43px;
            margin-top: 40px;
            background: linear-gradient(90deg, #ecb53c, #ff9211);
            color: #fff;
            border-radius: 40px;
            box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
            letter-spacing: 2px;
            border: none;
        }

    }
}

</style>
